import React from 'react'
import PropTypes from 'prop-types'
import {Table, Avatar} from 'antd'
import config from 'config'
import AnimTableBody from 'components/DataTable/AnimTableBody'
import '../../../utils/index'

const timestampToTime = (timestamp) => {
  let dateObj = new Date(timestamp)
  return dateObj.format('yyyy-qq-dd HH:mm:ss')
}

const List = ({location, isMotion, start, end, ...tableProps}) => {
  const {dataSource} = tableProps

  const getAvatarText = (record) => {
    const {friendNickname, customerWxId} = record
    if (friendNickname) {
      return friendNickname.substr(friendNickname.length - 1, friendNickname.length)
    } else {
      return customerWxId ? customerWxId.substr(0, 1).toUpperCase() : 'D'
    }
  }

  function getBeforeDate (n) {
    let s
    let d = new Date()
    let year = d.getFullYear()
    let mon = d.getMonth() + 1
    let day = d.getDate()
    if (day <= n) {
      if (mon > 1) {
        mon = mon - 1
      }
      else {
        year = year - 1
        mon = 12
      }
    }
    d.setDate(d.getDate() - n)
    year = d.getFullYear()
    mon = d.getMonth() + 1
    day = d.getDate()
    s = (mon < 10 ? ('0' + mon) : mon) + "月" + (day < 10 ? ('0' + day) : day) + '日'
    return s
  }

  const generateDynamicItem = () => {
    if (!start) {
      start = new Date()
      start.setHours(0)
      start.setMinutes(0)
      start.setSeconds(0)
    }
    let date = new Date()
    if (end != null) {
      date = end
    }
    let today = `${date.getMonth() + 1}月${date.getDate()}日`
    if (start.getMonth() + 1 === date.getMonth() + 1 && date.getHours() === 0) {
      return [{
        title: `${today}${date.getHours()}时`,
        dataIndex: 'count.0.visitCount',
        key: 'count',
      }]
    } else {
      let ms = date.getTime() - start.getTime()
      if (ms < 0) {
        return
      }

      let index = ms / 1000 / 60 / 60
      let columns = []
      for (let m = date.getMonth() + 1; m >= start.getMonth() + 1; m--) {
        let endDay = date.getDate()
        let startDay = start.getDate()
        if (m < date.getMonth() + 1) {
          endDay = new Date(date.getFullYear(), m, 0).getDate()
        } else if (m === date.getMonth() + 1 && start.getMonth() + 1 < m) {
          startDay = 1
        }
        for (let d = endDay; d >= startDay; d--) {
          let hours = date.getHours()
          if (d < date.getDate() || m < date.getMonth() + 1) {
            hours = 23
          }
          for (let i = hours; i >= start.getHours(); i--) {
            let data = {}
            data.title = `${m}月${d}日${i}时`
            data.dataIndex = "count." + (index) + '.visitCount'
            data.key = "count." + (index) + '.visitCount' + m + d + i
            data.dateTime = `${date.getFullYear()}-${m}-${d} ${i}`
            index--
            columns.push(data)
          }
        }
      }
      return columns.reverse()
    }
  }

  // const generateDynamicItem = () => {
  //   let today = new Date().getMonth()+ 1 + '月' + new Date().getDate() + '日'
  //   let columns = [
  //     today
  //   ]
  //   for (let i = 13; i >=1; i--) {
  //     columns.push(getBeforeDate(i - 1))
  //   }
  //
  //   for(let j = 13; j >= 1;j--){
  //     let obj={}
  //     let num = j
  //     obj.title = columns[j]
  //     obj.dataIndex = "dateAndTotalNum." + j + '.totalNum'
  //     obj.key = num
  //     columns.push(obj)
  //   }
  //   columns.splice(0,14)
  //   return columns
  // }

  const columns = [
    {
      title: '头像',
      dataIndex: 'icon',
      key: 'icon',
      width: 130,
      render: (avatar, record, index) => avatar ? <Avatar src={avatar} size="large"/> :
        <Avatar style={{backgroundColor: config.randomColor(index), verticalAlign: 'middle'}}
                size="large">{getAvatarText(record)}</Avatar>,
      fixed: 'left',
    },
    {
      title: '运营微号',
      dataIndex: 'wxNo',
      key: 'wxId',
      width: 100,
      render: (val, r) => val ? val : r.wxId,
      fixed: 'left',
    },
    {
      title: '归属员工',
      dataIndex: 'belongEmpName',
      key: 'belongEmpName',
      width: 100,
      fixed: 'left',
    },
    {
      title: '公司部门',
      dataIndex: 'deptName',
      key: 'deptName',
      width: 100,
      fixed: 'left',
    },
    {
      title: "沟通总数",
      dataIndex: 'incomeNumByNow',
      key: 'incomeNumByNow',
      width: 100,
      fixed: 'left',
    },
    ...generateDynamicItem(),
  ]

  const AnimateBody = (props) => {
    return <AnimTableBody {...props} />
  }

  const CommonBody = (props) => {
    return <tbody {...props} />
  }

  return (
    <Table
      {...tableProps}
      columns={columns}
      scroll={{x: 2000}}
      simple
      rowKey={record => record.id}
      components={{
        body: {wrapper: isMotion ? AnimateBody : CommonBody},
      }}
    />
  )
}

List.propTypes = {
  location: PropTypes.object,
}

export default List
